<template>
  <div class="text-to-image">
    <div class="workspace">
      <!-- 左侧参数面板 -->
      <div class="params-panel">
        <el-form label-position="top">
          <!-- 提示词输入 -->
          <el-form-item label="正向提示词">
            <el-input
              v-model="prompt"
              type="textarea"
              :rows="4"
              placeholder="描述你想要生成的图片..."
            />
          </el-form-item>
          
          <el-form-item label="负向提示词">
            <el-input
              v-model="negativePrompt"
              type="textarea"
              :rows="2"
              placeholder="不想要出现的元素..."
            />
          </el-form-item>

          <!-- 模型选择 -->
          <el-form-item label="模型">
            <el-select v-model="selectedModel" style="width: 100%">
              <el-option label="Stable Diffusion 1.5" value="sd15" />
              <el-option label="Stable Diffusion XL" value="sdxl" />
              <el-option label="Stable Diffusion 2.1" value="sd21" />
            </el-select>
          </el-form-item>

          <!-- 采样器和步数 -->
          <el-form-item label="采样器">
            <el-select v-model="sampler" style="width: 100%">
              <el-option label="Euler a" value="euler_a" />
              <el-option label="DPM++ 2M Karras" value="dpm_2m_karras" />
              <el-option label="DPM++ SDE Karras" value="dpm_sde_karras" />
            </el-select>
          </el-form-item>

          <el-form-item label="步数">
            <el-slider v-model="steps" :min="20" :max="50" />
          </el-form-item>

          <!-- 尺寸设置 -->
          <el-form-item label="尺寸">
            <div class="size-inputs">
              <el-input-number v-model="width" :min="512" :max="2048" :step="64" />
              <span>x</span>
              <el-input-number v-model="height" :min="512" :max="2048" :step="64" />
            </div>
          </el-form-item>

          <!-- 生成按钮 -->
          <el-form-item>
            <el-button type="primary" :loading="generating" @click="handleGenerate" style="width: 100%">
              生成图片
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 右侧预览区 -->
      <div class="preview-panel">
        <div v-if="!generatedImage" class="empty-preview">
          <el-icon :size="48"><Picture /></el-icon>
          <p>生成的图片将在这里显示</p>
        </div>
        <div v-else class="preview-image">
          <img :src="generatedImage" alt="Generated image" />
          <div class="preview-actions">
            <el-button-group>
              <el-button type="primary" @click="handleSave">
                <el-icon><Download /></el-icon>
                保存
              </el-button>
              <el-button type="primary" @click="handleShare">
                <el-icon><Share /></el-icon>
                分享
              </el-button>
            </el-button-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Picture, Download, Share } from '@element-plus/icons-vue'
import { useImageStore } from '../stores/image'
import { ElMessage } from 'element-plus'

const imageStore = useImageStore()

// 表单数据
const prompt = ref('')
const negativePrompt = ref('')
const selectedModel = ref('sd15')
const sampler = ref('euler_a')
const steps = ref(30)
const width = ref(512)
const height = ref(512)

// 状态
const generating = ref(false)
const generatedImage = ref('')

// 生成图片
const handleGenerate = async () => {
  if (!prompt.value) return
  
  generating.value = true
  try {
    const result = await imageStore.generateImage(prompt.value, {
      negative_prompt: negativePrompt.value,
      model: selectedModel.value,
      sampler: sampler.value,
      steps: steps.value,
      width: width.value,
      height: height.value
    })
    generatedImage.value = result.imageUrl
  } catch (error) {
    ElMessage.error('生成失败：' + error.message)
  } finally {
    generating.value = false
  }
}

// 保存图片
const handleSave = () => {
  const link = document.createElement('a')
  link.href = generatedImage.value
  link.download = 'generated-image.png'
  link.click()
}

// 分享图片
const handleShare = () => {
  // 实现分享功能
}
</script>

<style scoped lang="scss">
.text-to-image {
  height: 100%;
}

.workspace {
  display: flex;
  gap: 20px;
  height: 100%;
}

.params-panel {
  width: 300px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  overflow-y: auto;

  .size-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.preview-panel {
  flex: 1;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .empty-preview {
    text-align: center;
    color: #999;

    p {
      margin-top: 12px;
    }
  }

  .preview-image {
    width: 100%;
    height: 100%;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .preview-actions {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.9);
      padding: 8px;
      border-radius: 4px;
    }
  }
}
</style> 